    <canvas id="canvas" width='500' height="500" style="background:#eee">
           <p>you browser not support canvas!<p>
       </canvas>
       <script>
            window.onload = ()=>{
            
            //画一个箭头
class Vertex{
    constructor(x, y, baseY){
        this.x = x
        this.y = y
        this.baseY = baseY
        this.vy = 0 
        this.targetY = 0
        this.friction = 0.08 //摩擦力
        this.deceleration = 0.95 //减速
    }
    update(y){
        this.targetY = y + this.baseY
        this.vy += this.targetY - this.y
        this.vy *= this.deceleration
        this.y += this.vy * this.friction
    }
}
            
let clearCanvas = function(obj){
    obj.clearRect(0, 0, obj.canvas.width, obj.canvas.height)
}
            
                let canvas = document.getElementById('canvas'),
                    ctx = canvas.getContext('2d'),
                    w = canvas.width = window.innerWidth,
                    h = canvas.height = window.innerHeight,
                    currentX = w / 2,
                    currentY = h / 2,
                    color1 = '#6ca0f6',
                    color2 = '#367aec'
                    
                let vertexes = [],//顶点坐标
                    verNum = 300,//顶点数量
                    diffPt = []//差分值
                for(let i = 0; i < verNum; i++){
                    vertexes[i] = new Vertex(w / (verNum - 1) * i, currentY, currentY)
                    diffPt[i] = 0
                }
                function draw(){
                    ctx.save()
                    ctx.fillStyle = color1
                    ctx.beginPath()
                    ctx.moveTo(0, h)
                    for(let i = 0; i < verNum; i++){
                        ctx.lineTo(vertexes[i].x, vertexes[i].y)
                    }
                    ctx.lineTo(w, h)
                    ctx.lineTo(0, h)
                    ctx.fill()
                    ctx.restore()
                    
                    ctx.save()
                    ctx.fillStyle = color2
                    ctx.beginPath()
                    ctx.moveTo(0, h)
                    for(let i = 0; i < verNum; i++){
                        ctx.lineTo(vertexes[i].x, vertexes[i].y + 5)
                    }
                    ctx.lineTo(w, h)
                    ctx.lineTo(0, h)
                    ctx.fill()
                    ctx.restore()
                }
                let vPos = 50,//着力点
                    dd = 20,//缓存
                    autoDiff = 2000;//默认力度
                canvas.addEventListener('mousedown', event => {
                    //定义一个名为mouse的对象
                    let x,y;
                    //获取鼠标位于当前屏幕的位置， 并作兼容处理
                    if(event.pageX||event.pageY){
                        x = event.pageX;
                        y = event.pageY;
                    }else{
                        x = event.clientX + document.body.scrollLeft +document.documentElement.scrollLeft;
                        y = event.clientY + document.body.scrollTop +document.documentElement.scrollTop;
                    }
                    //将当前的坐标值减去元素的偏移位置，即为鼠标位于当前canvas的位置
                    x -= event.currentTarget.offsetLeft;
                    y -= event.currentTarget.offsetTop;
                    vPos = parseInt(x / (w / verNum))
                    autoDiff = 2000
                }, false);
                (function update(){
                    requestAnimationFrame(update, canvas)
                    clearCanvas(ctx)
                    autoDiff -= autoDiff * 0.9//降低力度
                    diffPt[vPos] = autoDiff//着力点加力
                    vertexes[vPos].update(diffPt[vPos])
                    for(let i = vPos - 1; i >= 0; i --){
                        let d = vPos - i
                        if(d > dd){//超过了一定程度就不在削弱了
                            d = dd
                        }
                        diffPt[i] -= (diffPt[i] - diffPt[i + 1]) * (1 - 0.01 * d)
                        vertexes[i].update(diffPt[i])
                    }
                    
                    for(let i = vPos + 1; i < verNum; i ++){
                        let d = i - vPos
                        if(d > dd){//超过了一定程度就固定了
                            d = dd
                        }
                        diffPt[i] -= (diffPt[i] - diffPt[i - 1]) * (1 - 0.01 * d)
                        vertexes[i].update(diffPt[i])
                    }
                    draw()
                })()
                    
            }
       </script>